<template>
	<view class="vi_tabbar">
		<view class="vi_tabbar_body" :style="mainStyle">
			<!-- 背景图 -->
			<view class="vi_tabbar_backgroundImage vi_tabbar_full" v-if="bgImage">
				<image class="vi_tabbar_full" :src="bgImage" mode="aspectFill"></image>
			</view>
			<!-- 顶部占位 -->
			<view v-if="isTop&&statusFix">
				<view :style="{'height': statusHight}" v-if="bgImage"></view>
				<view v-else>
					<vi-style-controller :type="setting.type" :color="color" :height="statusHight" active></vi-style-controller>
				</view>
			</view>
			<vi-style-controller
				:type="setting.type"
				:color="color"
				:borderWidth="borderWidth"
				:borderType="borderType"
				:borderColor="borderColor"
				borderBox
				active>
				<view class="vi_tabbar_content" :class="{'vi_tabbar_appletFix':isTop&&appletFix}" :style="contentStyle">
					<view class="vi_tabbar_buttonBox" v-for="(item,index) in inList" :key="index"
						:style="{color: index==currIdx?item.activeColor||activeColor||item.baseColor||baseColor||'inherit':item.baseColor||baseColor||'inherit'}"
						@click="itemClick(item, index)">
						<view class="vi_tabbar_tabIconBox" :style="iconBoxStyle">
							<view class="vi_tabbar_tabIcon" :style="iconStyle">
								<vi-sign
									:disabled="!inSignList[index]"
									:mode="inSignList[index]&&inSignList[index].mode"
									:value="inSignList[index]&&inSignList[index].value"
									:point="inSignList[index]&&inSignList[index].point"
									:type="(inSignList[index]&&inSignList[index].type)||'error'"
									:color="inSignList[index]&&inSignList[index].color"
									:textColor="inSignList[index]&&inSignList[index].textColor"
									:borderColor="inSignList[index]&&inSignList[index].borderColor"
									:borderType="inSignList[index]&&inSignList[index].borderType"
									:borderBox="inSignList[index]&&inSignList[index].borderBox"
									:backgroundColor="inSignList[index]&&inSignList[index].backgroundColor"
									:radius="inSignList[index]&&inSignList[index].radius"
									:plain="inSignList[index]&&inSignList[index].plain"
									:shadow="inSignList[index]&&inSignList[index].shadow"
									:width="inSignList[index]&&inSignList[index].width"
									:height="inSignList[index]&&inSignList[index].height"
									:borderWidth="(inSignList[index]&&inSignList[index].borderWidth)||0"
									:fontSize="inSignList[index]&&inSignList[index].fontSize"
									:bold="inSignList[index]&&inSignList[index].bold"
									:max="maxNum||999"
									inside>
									<view :class="item.class" :style="'width:'+(item.iconSize||setting.iconSize)+';height:'+(item.iconSize||setting.iconSize)+';'+item.style">
										<image class="vi_tabbar_full" :src="index==currIdx?item.activeImagePath||item.baseImagePath:item.baseImagePath" mode="aspectFit" v-if="item.baseImagePath"></image>
										<view class="iconfont" :class="item.icon" v-else-if="item.icon"
											:style="{
												'font-size':item.iconSize||setting.iconSize,
												'color':index==currIdx?item.activeIconColor||item.baseIconColor||'inherit':item.baseIconColor||'inherit'
											}"></view>
									</view>
								</vi-sign>
							</view>
						</view>
						<view class="vi_tabbar_tabText" :class="{'vi_tabbar_tabTextBold':item.bold||bold}"
							:style="{
								'margin-top':!isTop?setting.textSpace||0:0,
								'margin-bottom':isTop?setting.textSpace||0:0,
								'font-size':item.fontSize||'inherit'
							}">
							{{item.text}}
						</view>
					</view>
				</view>
			</vi-style-controller>
		</view>
		<!-- 浮动占位 -->
		<view v-if="isTakePlace">
			<view :style="{'height': statusHight}" v-if="isTop&&statusFix"></view>
			<view :style="contentStyle" />
		</view>
	</view>
</template>

<script>
	export default {
		name:"viTabbar",
		props:{
			isTop:{
				type:[Boolean,null],
				default:false
			},
			top:{
				type:[String,Number,null],
				default:""
			},
			bottom:{
				type:[String,Number,null],
				default:""
			},
			position:{
				type:[String,null],
				default:""
			},
			type:{
				type:[String,null],
				default:null
			},
			//导航条自定义颜色
			color:{
				type:[String,null],
				default:""
			},
			//默认文字色，同时用于字体图标
			baseColor:{
				type:[String,null],
				default:""
			},
			//激活文字色，同时用于字体图标
			activeColor:{
				type:[String,null],
				default:""
			},
			borderWidth:{
				type:[Number,String,Array,null],
				default:0
			},
			borderType:{
				type:[String,null],
				default:""
			},
			borderColor:{
				type:[String,Array,null],
				default:""
			},
			//背景图
			bgImage:{
				type:[String,null],
				default:""
			},
			zIndex:{
				type:[Number,null],
				default:null
			},
			//小程序分享按钮占位
			appletFix:{
				type:[Boolean,null],
				default:false
			},
			//栏高
			height:{
				type:[String,Number,null],
				default:null
			},
			textSpace:{
				type:[String,null],
				default:""
			},
			//使用状态栏占位
			statusFix:{
				type:[Boolean,null],
				default:false
			},
			//不使用占位
			noSeat:{
				type:[Boolean,null],
				default:false
			},
			//图标空位大小
			iconSize:{
				type:[String,null],
				default:null
			},
			fontSize:{
				type:[String,null],
				default:null
			},
			bold:{
				type:[Boolean,null],
				default:false
			},
			dataList:{
				type:[Array,null],
				default:()=>[
					// {
					// 	id:"",
					// 	icon:"",
					// 	class:"",
					// 	style:"",
					// 	type:"",
					// 	color:"",
					// 	bold:false,
					// 	text:"",
					// 	fontSize:"",
					// 	current:false,
					// 	pagePath:"",
					// 	baseImagePath:"",
					// 	activeImagePath:"",
					// 	baseColor:"",
					// 	activeColor:"",
					// }
				]
			},
			signList:{
				type:[Array,null],
				default:()=>[
					// {
					// 	mode:"icon",//类型，icon图标、dot圆，其他为值
					// 	value:""
					// }
				]
			},
			current:{
				type:[String,Number,null],
				default:0
			},
			maxItem:{
				type:[String,Number,null],
				default:null
			},
			maxNum:{
				type:[String,Number,null],
				default:null
			},
			statusTop:{
				type:[Number,null],
				default:0
			}
		},
		data(){
			return {
				statusHight:0,
				inList: [],
				currIdx: 0,
				inSignList: [],
			}
		},
		computed:{
			setting(){
				return {
					type: this.bgImage? "" :(this.$api.isDefined(this.type)? this.type :"primary"),
					zIndex: this.$api.isValue(this.zIndex)? this.zIndex :201,
					height: this.$api.isValue(this.height)? this.height :"50px",
					iconSize: this.$api.isDefined(this.iconSize)? this.iconSize :"24px",
					fontSize: this.fontSize || "12px",
					textSpace: this.textSpace || "0.3em",
				}
			},
			inPosition(){
				return ["static","relative","fixed","absolute","sticky"].includes(this.position)? this.position :"fixed"
			},
			isTakePlace(){
				return !this.noSeat && ["fixed","absolute"].includes(this.inPosition)
			},
			mainStyle(){
				let res = {
					"z-index": this.setting.zIndex,
					"position": this.inPosition,
					"font-size": this.setting.fontSize,
				}
				//非静态定位则偏移有效
				if(this.inPosition!="static"){
					if(this.isTop){//顶部
						res["top"] = this.top ||0
					}else{//底部
						res["bottom"] = this.bottom ||0
					}
				}
				return this.$api.objToStr(res)
			},
			contentStyle(){
				return `height:${this.setting.height};`
			},
			iconBoxStyle(){
				let res = {
					"width": this.setting.iconSize,
					"height": this.setting.iconSize,
				}
				if(this.isTop){
					res["order"] =2
				}
				return this.$api.objToStr(res)
			},
			iconStyle(){
				return this.isTop? `top:0;` :`bottom:0;`
			}
		},
		methods:{
			//按钮点击
			itemClick(item, index){
				if(item.pagePath){
					this.$api.linkTo(item.pagePath, "forward")
				}else{
					this.$emit("click", {
						item,
						index
					})
				}
			},
			setCurrent(newVal){
				if(typeof(newVal)=="string"){
					//当做id查找
					let inList = this.inList;
					this.currIdx = 0;
					for(let i=0,len=inList.length; i<len; i++){
						if(newVal==inList[i].id){
							this.currIdx = i;
							break;
						}
					}
				}else{
					this.currIdx = Number(newVal)||0
				}
			},
			//设置图标
			setSign(options={}){
				let {id, index, icon, value} = options;
				let currIdx =-1;
				if(id||id===0){
					let inList = this.inList;
					for(let i=0,len=inList.length; i<len; i++){
						if(id==inList[i].id){
							currIdx = i;
							break;
						}
					}
				}
				if(currIdx==-1&&this.$api.isValue(index)){
					currIdx = Number(index)
				}
				if(currIdx!=-1&&!isNaN(currIdx)&&currIdx<this.inList.length){
					if(icon){
						this.inSignList[currIdx] = Object.assign({},options,{
							mode: "icon",
							value: icon
						})
					}else if(typeof(value)=="boolean"||(!value&&value!==0)){
						this.inSignList[currIdx] = value? Object.assign({},options,{mode: "dot",value:""}) :undefined
					}else{
						this.inSignList[currIdx] = Object.assign({},options,{
							mode: "value",
							value
						})
					}
				}
				this.$forceUpdate();
			}
		},
		watch:{
			"dataList":{
				immediate:true,
				handler(newVal){
					this.inList = this.$api.isArray(newVal)? newVal :[];
					let inList = this.inList,
						len = inList.len;
					for(let i=0; i<len; i++){
						let item = inList[i];
						if(item.current){
							this.currIdx = i;
							break;
						}
					}
					let maxItem = Number(this.maxItem) ||5;
					if(len>maxItem){
						this.inList.slice(maxItem);
					}
				}
			},
			"current":{
				immediate:true,
				handler(newVal){
					if(typeof(newVal)=="string"){
						//当做id查找
						let inList = this.inList;
						this.currIdx = 0;
						for(let i=0,len=inList.length; i<len; i++){
							if(newVal==inList[i].id){
								this.currIdx = i;
								break;
							}
						}
					}else{
						this.currIdx = newVal? Number(newVal)||0 : 0
					}
				}
			},
			"signList":{
				immediate:true,
				handler(newVal){
					this.inSignList = this.$api.isArray(newVal)? newVal :[];
					let len = this.inSignList.length,
						maxItem = Number(this.maxItem) ||5;
					if(len>maxItem){
						this.inSignList.slice(maxItem);
					}
				}
			}
		},
		created(){
			this.statusHight = (this.statusTop || uni.getSystemInfoSync().statusBarHeight) + 'px';
		}
	};
</script>

<style lang="scss">
.vi_tabbar{
	width: 100%;
	.vi_tabbar_body{
		width: 100%;
		.vi_tabbar_backgroundImage{
			position: absolute;
			top: 0;
			left: 0;
		}
		.vi_tabbar_content{
			position: relative;
			width: 100%;
			line-height: 1;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			/* #ifndef H5 || APP */
			&.vi_tabbar_appletFix{
				width: calc(100% - 100px);
				margin-right: 100px;
			}
			/* #endif */
		}
		.vi_tabbar_buttonBox{
			display: flex;
			flex-direction: column;
			align-items: center;
			flex-grow: 1;
			flex-shrink: 0;
		}
		.vi_tabbar_tabIconBox{
			position: relative;
			.vi_tabbar_tabIcon{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		}
		.vi_tabbar_tabText{
			white-space: nowrap;
			overflow: hidden;
		}
		.vi_tabbar_tabTextBold{
			font-weight: bold;
		}
	}
	.vi_tabbar_full{
		width: 100%;
		height: 100%;
	}
}
</style>